<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<%@ include file="../header.jsp"%>
</head>
<body>
	<form id="formId" class="layui-form layui-form-pane" action="">
		<div class="layui-form-item" style="display: none;">
			<label class="layui-form-label">ID</label>
			<div class="layui-input-block">
				<input type="text" name="id" autocomplete="off" placeholder="请输入商品名" class="layui-input" value="${product.id}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品名</label>
			<div class="layui-input-block">
				<input type="text" name="name" autocomplete="off" placeholder="请输入商品名" class="layui-input" value="${product.name}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品副标题</label>
			<div class="layui-input-block">
				<input type="text" name="subtitle" autocomplete="off" placeholder="请输入商品副标题" class="layui-input" value="${product.subtitle}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品分类</label>
			<div class="layui-input-inline">
				<select name="" lay-filter="filter">
					<option value="">请选择一级分类</option>
					<c:forEach items="${topCategoryList}" var="category">
         				<c:if test="${category.id==parentId}">
         					<option selected value="${category.id}">${category.name}</option>
         				</c:if>
         				<c:if test="${category.id!=parentId}">
         					<option value="${category.id}">${category.name}</option>
         				</c:if>
         			</c:forEach>
				</select>
			</div>
			<div class="layui-input-inline">
				<select name="categoryId" lay-filter="filter">
					<option value="">请选择二级分类</option>
					<c:forEach items="${secondCategory}" var="second">
         				<c:if test="${second.id==product.categoryId}">
         					<option selected value="${second.id}">${second.name}</option>
         				</c:if>
         				<c:if test="${second.id!=product.categoryId}">
         					<option value="${second.id}">${second.name}</option>
         				</c:if>
         			</c:forEach>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品价格</label>
			<div class="layui-input-inline">
				<input type="text" name="price" autocomplete="off" placeholder="请输入商品价格" class="layui-input" value="${product.price}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品库存</label>
			<div class="layui-input-inline">
				<input type="text" name="stock" autocomplete="off" placeholder="请输入商品库存" class="layui-input" value="${product.stock}">
			</div>
		</div>
		<div class="layui-form-item" pane="">
			<label class="layui-form-label">商品状态</label>
			<div class="layui-input-inline">
				<input type="radio" name="status" value="1" title="在售" checked="">
				<input type="radio" name="status" value="2" title="下架">
				<input type="radio" name="status" value="3" title="删除">
			</div>
		</div>
		<div class="layui-form-item" pane="">
	    	<label class="layui-form-label">商品主图</label>
	    	<div class="layui-input-inline">
				<div class="layui-upload-list">
					<input type="hidden" name="mainImage" />
					<img class="layui-upload-img" id="mainImageId" width="150px" height="150px" src="/pic/${product.mainImage}">
					<p id="demoText"></p>
				</div>
	    		<button type="button" class="layui-btn" id="uploadBtn">上传图片</button>
			</div>
	   	</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">商品详情</label>
			<div class="layui-input-block">
				<textarea placeholder="请输入内容" id="detailId" name="detail" class="layui-textarea">${product.detail}</textarea>
			</div>
		</div>
  		<div class="layui-form-item">
	   		<input type="button" class="layui-btn" onclick="submitForm()" style="margin-left: 30px;" value="立即修改"/>
	  	</div>
  	</form>
	<script type="text/javascript" src="${path}/resources/kindeditor/kindeditor.js"></script>
	<script type="text/javascript" src="${path}/resources/kindeditor/lang/zh_CN.js"></script>
	<script type="text/javascript">
	layui.use(['form', 'laydate', 'upload'], function() {
		var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
		//但是，如果你的HTML是动态生成的，自动渲染就会失效
		//因此你需要在相应的地方，执行下述方法来进行渲染
		var laydate = layui.laydate;
		var upload = layui.upload;
		
		form.render();
		//普通图片上传
		var uploadInst = upload.render({
		  elem: '#uploadBtn'
		  ,url: '${path}/uploadImg.action' //改成您自己的上传接口
		  ,before: function(obj){
		    //预读本地文件示例，不支持ie8
		    obj.preview(function(index, file, result){
		      $('#mainImageId').attr('src', result); //图片链接（base64）
		    });
		  }
		  ,done: function(jsonResult){
		    if(jsonResult.code == 0){
		  	  $('input[name="mainImage"]').val(jsonResult.data);
		    } else {
		      return layer.msg('上传失败');
		    }
		  }
		  ,error: function(){
		    //演示失败状态，并实现重传
		    var demoText = $('#demoText');
		    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		    demoText.find('.demo-reload').on('click', function(){
		      uploadInst.upload();
		    });
		  }
		});
		
		
	});
	function submitForm() {
		$.post('${path}/product/update.action', 
				$('#formId').serialize(),
				function(jsonObj) {
					if (jsonObj.code == 0) {
						mylayer.successMsg(jsonObj.msg);
						var index = layer.getFrameIndex(window.name);
						setTimeout(function() {
							layer.close(index);
							window.parent.location.reload();
						}, 1000);
					} else {
						mylayer.errorMsg(jsonObj.msg);
					}
				}, 'json');
	}
	KindEditor.ready(function(K) {
	    var kingEditorParams = {
	         afterBlur: function () { this.sync(); }
	    }
	    KindEditor.create('#detailId', kingEditorParams);
	});
	</script>
</body>
</html>